<template>
  <div class="author-card-wrapper">
    <div class="author-base-info" @click="gotoAuthor">
      <img :src="authorAvatarUrl" alt="Author" class="author-avatar">
      <div class="author-base-intro">
        <h2>{{author.username}}</h2>
        <h3>{{author.sign || "这个人很神秘，这里什么也没有"}}</h3>
      </div>
    </div>

    <ul class="author-data-info" @click="gotoAuthor">
      <li v-for="(data, idx) in datas" :key="idx">
        <h2>{{author[data.key]}}</h2>
        <h3>{{data.name}}</h3>
      </li>
    </ul>

    <ul class="util-list">
      <li @click="follow" :class="{
        highlight: author.is_follow
      }">
        <i class="iconfont icon-follow1"></i>
        <span>{{author.is_follow ? "已关注" : "关注"}}</span>
      </li>
      <li @click="gotoAuthor">
        <i class="iconfont icon-gengduo"></i>
        <span>更多作品</span>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    props: {
      author: {
        type: Object,
        default: () => ({})
      },
    },
    data() {
      return {
        datas: [
          {
            name: '粉丝',
            key: 'follow_num'
          },
          {
            name: '文章',
            key: 'article_num'
          },
          {
            name: '获赞',
            key: 'like_num'
          },
          {
            name: '收藏',
            key: 'collect_num'
          }
        ]
      }
    },
    computed: {
      authorAvatarUrl() {
        return this.author.avatar
        ? this.$baseURL + this.author.avatar
        : this.$baseURL + this.$defaultAssetUrls.avatar;
      }
    },
    methods: {
      gotoAuthor() {
        this.$router.push({
          path: `/author/${this.author.id}/profile`
        })
      },
      follow() {
        this.$post({
          name: 'follow',
          url: 'author/follow',
          data: {
            author_id: this.author.id
          }
        }).then(res => {
          if(res.data.success) {
            this.author.is_follow = !this.author.is_follow;
            this.$alert(res.data.message);
            this.$store.commit("fetchUserInfos");
            this.$emit('fetchAuthorInfo');
          } else {
            if(this.author.is_follow) {
              this.$alert({
                type: 'error',
                content: "取消关注失败"
              });
            }  else {
              this.$alert({
                type: 'error',
                content: "关注失败"
              });
            }
          }
        }).catch(error => {
          if(this.author.is_follow) {
            this.$alert({
              type: 'error',
              content: "取消关注失败"
            });
          }  else {
            this.$alert({
              type: 'error',
              content: "关注失败"
            });
          }
        })
      }
    },
  }
</script>

<style lang="less" scoped>
.author-card-wrapper {
  box-sizing: border-box;
  --w: var(--authorInfoCardWidth);
  --h: var(--authorInfoCardHeight);
  width: var(--w);
  height: var(--h);
  padding: calc(var(--h) / 15) calc(var(--w) / 20);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: white;
  border-radius: calc(var(--h) / 50);

  .author-base-info {
    --a: calc(var(--h) * 0.2);
    height: calc(var(--h) * 0.3);
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    box-sizing: border-box;
    border-bottom: 1px solid var(--gray);

    .author-avatar {
      width: var(--a);
      height: var(--a);
      border-radius: 50%;

      &:hover {
        cursor: pointer;
      }
    }

    .author-base-intro {
      box-sizing: border-box;
      width: 70%;

      h2, h3 {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      h2 {
        line-height: calc(var(--a) * 0.6);
        font-size: calc(var(--a) * 0.4);
      }

      h3 {
        line-height: calc(var(--a) * 0.4);
        font-size: calc(var(--a) * 0.2);
      }
    }
  }

  .author-data-info {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: calc(var(--h) * 0.3);
    text-align: center;
  }

  .util-list {
    flex-grow: 1;
    --a: calc(var(--h) * 0.13);
    height: var(--a);
    display: flex;
    justify-content: space-around;
    align-items: center;

    li {
      width: 40%;
      border-radius: var(--a);
      border: 1px solid var(--gray);
      font-size: calc(var(--w) * 0.04);
      line-height: var(--a);
      text-align: center;
      color: var(--black);

      &:hover,
      i:hover,
      span:hover,
      &.highlight {
        color: var(--blue);
        border-color: var(--blue);
        cursor: pointer;
      }

      i {
        margin: 0 calc(var(--w) / 30) 0 0;
      }
    }
  }
}
</style>